import React, { Component } from 'react'
import { TouchableOpacity, View } from 'react-native'
import {pxToDp} from '../../utils/tools';

export default class Header extends Component{
  constructor(props) {
    super(props)
  }

  render() {
    const {left, right, style} = this.props
    const Left = left
    const Right = right
    return (
      <View style={{
        position: 'relative',
        justifyContent: 'center',
        height: pxToDp(50),
        alignItems: 'center',
        paddingLeft: pxToDp(10),
        paddingRight: pxToDp(10),
        backgroundColor: '#ddd',
        ...style
      }}>
        {
          Left ? <TouchableOpacity onPress={this.props.onLeftPress} style={{position: 'absolute', left: 0, padding: pxToDp(10)}}>
            <Left></Left>
          </TouchableOpacity> : null
        }
        {this.props.children}
        {
          Right ? <TouchableOpacity onPress={this.props.onRightPress} style={{position: 'absolute', right: 0, padding: pxToDp(10)}}>
            <Right></Right>
          </TouchableOpacity> : null
        }
      </View>
    )
  }
}
